<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 
  <meta name="format-detection" content="telephone=no" /> 
  <link href="/css/style.css" rel="stylesheet" type="text/css" />
  <link href="/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
  <link href="/css/confirmOrder.css" rel="stylesheet" type="text/css" />
  <!--<link href="css/h5_02.css" rel="stylesheet" type="text/css">-->

  <script src="/js/jquery-1.8.2.min.js"></script>
  <script src="/js/confirmOrder.js"></script>
  <script type="text/javascript">

        function confirmOrder() {
            var test = {
                bookDay : sessionStorage.getItem('day'),
                bookTime : sessionStorage.getItem('time'),
                mobile : $("#mobile").val(),
                name : $("#contacts").val(),
                note : $("#desc").val(),
                maleCount: $("#mannumber").val(),
                femaleCount: $("#womannumber").val(),
            }
            console.log(test)
            if(sessionStorage.getItem('day') && sessionStorage.getItem('time') && $("#mobile").val() && $("#contacts").val() && $("#mannumber").val() && $("#womannumber").val()){
                $.ajax({
                    url: '/order/add',
                    type:'post',
                    data: {
                        bookDay : sessionStorage.getItem('day'),
                        bookTime : sessionStorage.getItem('time'),
                        mobile : $("#mobile").val(),
                        name : $("#contacts").val(),
                        note : $("#desc").val(),
                        maleCount: $("#mannumber").val(),
                        femaleCount: $("#womannumber").val(),
                    },
                    success: function () {
                       sessionStorage.clear()
                        window.location.href="/order/orders"

                    },
                    error: function () {
                      alert('预约失败~')

                    }
                })
            }else {
                alert('请填写所有信息')
            }
        }
        function getTimeList(){//选择时间前也需要将用户基本信息保存
            var params = {
                mannumber:$("#mannumber").val(),
                womannumber:$("#womannumber").val(),
                contacts:$("#contacts").val(),
                mobile:$("#mobile").val(),
                time:$("#time").val(),
                department: $("#department").val()
            }
//
//            var url = "";

//            $.post(url, params, function(data){
//                sessionStorage.setItem('time',params.time)
                sessionStorage.setItem('mannumber',params.mannumber)
                sessionStorage.setItem('womannumber',params.womannumber)
                sessionStorage.setItem('contacts',params.contacts)
                sessionStorage.setItem('mobile',params.mobile)
                sessionStorage.setItem('department',params.department)
                window.location.href = "/order/chooseDate";
//            });

        }
        function infoMsg(){
            alert("同意本公司（留夏映画）的所有服务协议！");
        }


        function changeRadio(){
            var isChecked = $("#isChecked").attr("checked");
            if (isChecked == "checked"){
                $("#isChecked").attr("checked",false);
            } else {
                $("#isChecked").attr("checked","checked");
                document.getElementById("isChecked").checked = true;
            }
        }

    </script> 
  <title>订单详情</title>
 </head> 
 <body class="b_gray">
  <ul class="user_order2"> 
   <li class="active1"> 
    <dl> 
     <dt>
      1
     </dt> 
     <dd>
      了解详情
     </dd> 
    </dl> </li> 
   <li class="active"> 
    <dl> 
     <dt>
      2
     </dt> 
     <dd>
      订单详情
     </dd> 
    </dl> </li> 
   <li> 
    <dl> 
     <dt>
      3
     </dt> 
     <dd>
      预约成功
     </dd> 
    </dl> </li> 
   <div class="xian4 x_hover"></div> 
   <div class="xian5"></div> 
  </ul> 
  <div id="main" style="background: none; margin-top:15px;">
   <div class="input_group"> 
    <dl> 
     <dt>
      预约时间：
     </dt> 
     <dd class="fwdz" onclick="getTimeList()" id="">
      <input type="text" name="" placeholder="设置预约时间" value="" id="time" disabled style="background-color: white"/>
     </dd> 
     <i><img src="/images/2015dz_icon4.png" /></i>
    </dl> 
   </div>
   <div class="input_group">

    <dl>
     <dt>
      男生人数：
     </dt>
     <dd>
      <input type="text" name="" placeholder="男生" value="" id="mannumber" />
     </dd>
    </dl>
    <dl>
     <dt>
      女生人数：
     </dt>
     <dd>
      <input type="text" name="" placeholder="女生" value="" id="womannumber" />
     </dd>
    </dl>
   </div>
   <div class="input_group">

    <dl> 
     <dt>
      联系人： 
     </dt> 
     <dd>
      <input type="text" name="" placeholder="联系人:张丽" value="" id="contacts" />
     </dd> 
    </dl>

    <dl> 
     <dt>
      联系电话:
     </dt> 
     <dd>
      <input type="text" name="" placeholder="联系电话:1xxxxxxxxxx" value="" id="mobile" />
     </dd> 
    </dl>
    <dl>
     <dt>
      学院:
     </dt>
     <dd>
      <select id="department" style="border: none;width: 98%">
        <option th:each="item : ${departmentList}" ><span th:text="${item.value}"></span></option>

      </select>
     </dd>
     <i><img src="/images/2015dz_icon4.png" /></i>
    </dl>
   </div> 
   <div class="input_group"> 
    <!--<dl> -->
     <!--<dt>-->
      <!--服务地址：-->
     <!--</dt> -->
     <!--<dd class="fwdz_active" >-->
       <!--青岛大学-->
     <!--</dd> -->
     <!--<i><img src="/images/2015dz_icon4.png" /></i>-->
    <!--</dl> -->
   </div> 
   <div class="input_group" style="margin-bottom: 0;"> 
    <dl> 
     <dt>
      备注信息： 
     </dt> 
     <dd> 
      <textarea style="padding: 0;" name="" cols="" rows="" placeholder="请输入特殊要求" id="desc"></textarea> 
     </dd> 
    </dl> 
   </div> 
   <!--<div class="form_area" style="">-->
    <!--<div class="gth_btn"> -->
     <!--<span id="infoMsg" onclick="changeRadio()"> <input checked="checked" type="checkbox" name="" value="" id="isChecked" />同意留夏映画的所有服务条款 </span>-->
     <!--<a class=""><img id="checkImg" onclick="infoMsg()" src="/images/gth_icon.png" /></a>-->
    <!--</div> -->
   <!--</div> -->
   <div class="input_button" style="margin-bottom: 80px">
    <button class="btn2" onclick="confirmOrder();">确认订单</button>
   </div> 
  </div>
  <footer id="footer" class="foot">
   <ul>
    <li>
     <a href="/">
      <span class="img"><img src="/images/nav1.png"></span>
      <p>首页</p>
     </a>
    </li>
    <li>
     <a href="/hot/index">
      <span class="img"><img src="/images/nav2.png"></span>
      <p>动态</p>
     </a>
    </li>
    <li class="active">
     <a href="/order/index">
      <span class="img"><img src="/images/nav3.png"></span>
      <p>预约</p>
     </a>
    </li>
    <li >
     <a href="/user/index">
      <span class="img"><img src="/images/nav4.png"></span>
      <p>我的</p>
     </a>
    </li>
   </ul>
  </footer>
 </body>
<script>


    $(function () {
        if (sessionStorage.length>=4){

        $("#mannumber").val(sessionStorage.getItem('mannumber'));
         $("#womannumber").val(sessionStorage.getItem('womannumber'));
         $("#contacts").val(sessionStorage.getItem('contacts'))
         $("#mobile").val(sessionStorage.getItem('mobile'))
            var time;
            sessionStorage.getItem('time')== 1? time = '第一场' : ( sessionStorage.getItem('time') == 2 ? time= '第二场': time = '请选择时间')
         $("#time").val((sessionStorage.getItem('day')? sessionStorage.getItem('day'): '' )+time)

         $("#department").val(sessionStorage.getItem('department'))
        }





    })
</script>
</html>